<template>
    <div>
        <div class="footer">
          <div class="hshop">
            <div class='cart'>
                <van-icon class="cartnum" name="chat-o" badge="0" />
                <span class="layout-shopping_cart scart" @click="isCart = true"></span>
            </div>
        </div>
          <div class="hprice">￥0</div>
          <div class="addprice">另需配送￥4元</div>
          <div class="totalprice">￥20起送</div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "shopFooter",
        data() {
            return{
                isCart:false
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
  .footer{
    display: flex;
    position: relative;
    align-items: center;
    position:fixed;
    bottom:0;
    width: 100%;
    height: 96rem;
    background-color: #141d27;
    z-index: 2;
  }
  .footer .hshop{
    position:absolute;
    bottom: 0;
    left: 36rem;
    width:116rem;
    height: 116rem;
    background-color:  #141d27;
    border-radius: 50%;
    z-index: 2;
  }
  .footer .hshop .cart{
    display: flex;
    justify-content:center;
    align-items: center;
    position:absolute;
    bottom: 16rem;
    left: 16rem;
    width: 88rem;
    height: 88rem;
    border-radius: 50%;
    text-align: center;
    background-color:rgb(255, 255,255,0.1);
    z-index: 2;
  }

  .footer .hshop .cart .active{
    display: flex;
    justify-content:center;
    align-items: center;
    position:absolute;
    bottom: 16rem;
    left: 16rem;
    width: 88rem;
    height: 88rem;
    border-radius: 50%;
    text-align: center;
    background-color:rgb(0,160,220);
    z-index: 2;
  }

  .cart .cartnum{
    position:absolute;
    bottom:60rem;
    left:60rem;
  }
  .hshop .cart .scart{
    font-size:48rem;
    line-height:48rem;
    height:48rem;
    /* color: rgb(0,0,0,0.1); */
    color:rgb(255, 255,255,0.4);
  }
 
  .footer .hprice{
    font-size:32rem;
    color:rgb(255,255,255,0.4);
    font-weight: 700;
    line-height: 48rem;
    padding-right:24rem;
    margin-left:160rem;
    border-right: 1px solid rgb(255,255,255,0.1);
  }
  .footer .addprice{
    font-size: 32rem;
    color:rgb(255, 255,255,0.4);
    line-height: 48rem;
    margin-left: 24rem;
  }
  .footer .totalprice{
    position:absolute;
    right:0;
    bottom: 0;
    width: 210rem;
    text-align:center;
    font-size: 24rem;
    color:rgb(255,255,255,0.4);
    font-weight: 700;
    line-height: 96rem;
    background-color: #2b333b;
    z-index: 2;
  }
</style>